<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import { ProductStatus } from '@/enum/product'
import SetGoodsMarketPrice from './components/SetGoodsMarketPrice.vue'
import LimitTimeDiscountModal from './components/LimitTimeDiscountModal.vue'
import LimitTimeSecKillModal from './components/LimitTimeSecKillModal.vue'
import { Market } from '@/enum/market'
import useModal from '@/hooks/useModal'

import useTable from '@/hooks/useTable'
const { store } = useModal()
const selectedKeys = ref([])
const route = useRoute()
const router = useRouter()
const { formatColumns } = useTable()
const searchQuery = reactive({
  sellerId: '',
})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    get(
      {
        url: '/server-shop/sys-seller/goods/page',
        data: { size: params.pageSize, ...params },
      },
      ({ data, code }) => {
        data.records.map(item => {
          item.disabled = item.status != ProductStatus.上架中
        })
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const handleClick = item => {
  /**区分分销商品添加 */
  const type = route.query.type as string
  if ([Market.限时折扣 + '', Market.限时秒杀 + ''].includes(type)) {
    store.handleShow(item)
  } else if ([Market.N元N件 + '', Market.满减活动 + ''].includes(type)) {
    add(item.id)
  } else {
    store.handleShow(item)
  }
}
const batch = () => {
  if (selectedKeys.value.length) {
    const ids = selectedKeys.value.join(',')
    add(ids)
  } else message({ type: 'error', content: '请至少勾选一个商品' })
}
const add = id => {
  post(
    {
      url: '/server-shop/sys-seller/publicity/goods/save',
      data: { goodsIds: id, ...route.query },
    },
    ({ code, msg }) => {
      message({
        type: code == 200 ? 'success' : 'error',
        content: msg,
        cb: () => router.go(-1),
      })
    }
  )
}
const cmp = computed(() => {
  if (route.query.type == Market.限时折扣) return LimitTimeDiscountModal
  else if (route.query.type == Market.限时秒杀) return LimitTimeSecKillModal
  else return SetGoodsMarketPrice
})
const columns = formatColumns([
  { title: '货架号', dataIndex: 'sn', width: 120, hideInSearch: false },
  { title: '商品图片', dataIndex: 'img', width: 90, valueType: 'image' },
  { title: '商品名称', dataIndex: 'name', width: 200, hideInSearch: false },
  {
    title: '商品价',
    dataIndex: 'goodsPrice',
    width: 100,
    valueType: 'money',
    sorter: true,
  },
  {
    title: '参与活动',
    dataIndex: 'publicityGoodsList',
    width: 160,
    slotName: 'publicityGoodsList',
  },
  { title: '点击量', dataIndex: 'clickNum', width: 100 },

  {
    title: '评价数',
    dataIndex: 'commentNum',
    width: 100,
  },
  {
    title: '商品状态',
    dataIndex: 'status',
    width: 90,
    hideInSearch: false,
    valueEnum: {
      [ProductStatus.下架中]: { text: '下架中', status: 'Warning' },
      [ProductStatus.上架中]: { text: '上架中', status: 'Success' },
      [ProductStatus.审核不通过]: { text: '审核不通过', status: 'Error' },
      [ProductStatus.待审核]: { text: '待审核', status: 'Processing' },
      [ProductStatus.平台下架]: { text: '平台下架', status: 'Warning' },
    },
  },

  // {
  //   title: '商品价',
  //   dataIndex: 'goodsPrice',
  //   width: 100,
  //   valueType: 'money',
  // },
  {
    title: '是否热门',
    dataIndex: 'isHot',
    width: 90,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  {
    title: '是否推荐',
    dataIndex: 'isPush',
    width: 90,
    valueEnum: {
      1: { text: '是' },
      0: { text: '否' },
    },
  },
  { title: '销量', dataIndex: 'salesVolume', width: 90 },
  { title: '库存', dataIndex: 'stock', width: 90, sorter: true },
  { title: '创建时间', dataIndex: 'createTime', width: 200 },
  {
    title: '操作',
    dataIndex: 'operations',
    width: 100,
    fixed: 'right',
  },
])
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=""
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
      v-model:selectedKeys="selectedKeys"
      :row-selection="
        [Market.N元N件 + '', Market.满减活动 + ''].includes(route.query.type as string)
          ? {
              type: 'checkbox',
              showCheckedAll: true,
              onlyCurrent: false,
            }
          : undefined
      "
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
        <a-button type="primary" @click="batch" v-if="[Market.N元N件 + '', Market.满减活动 + ''].includes(route.query.type as string)">
          <template #icon>
            <icon-plus />
          </template>
          批量添加
        </a-button>
      </template>

      <template #publicityGoodsList="{ record }">
        <a-space>
          <a-tag v-for="val in record.publicityGoodsList">{{ val.publicityTitle }}</a-tag>
        </a-space>
      </template>
      <template #operations="{ record }">
        <a-button type="text" size="small" :disabled="record.status != ProductStatus.上架中" @click="handleClick(record)"> 添加 </a-button>
      </template>
    </ProTable>

    <component :is="cmp" v-if="store.show" v-model:show="store.show" :goodsId="store.info.id" :publicId="$route.query.publicityId" @confirm="$router.go(-1)" />
  </div>
</template>
